<template>
  <div class="show-main">
    <el-scrollbar style="height: 100%;">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <el-form :inline="true" :model="searchForm" ref="searchForm">
            <el-form-item prop="name">
              <el-input v-model="searchForm.name" clearable placeholder="请输入老板姓名"></el-input>
            </el-form-item>
            <el-form-item prop="status">
              <el-select v-model="searchForm.status" clearable placeholder="请选择状态">
                <el-option label="正常" value="1"></el-option>
                <el-option label="禁用" value="2"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item prop="is_adopt">
              <el-select v-model="searchForm.is_adopt" clearable placeholder="请选择审核状态">
                <el-option label="未审核" value="0"></el-option>
                <el-option label="通过" value="1"></el-option>
                <el-option label="未通过" value="2"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click.stop="search(true)">搜索</el-button>
              <el-button type="success" @click.stop="search">刷新</el-button>
            </el-form-item>
          </el-form>
        </div>
        <el-table :data="table" border>
          <el-table-column prop="id" label="ID" width="70"></el-table-column>
          <el-table-column prop="name" label="姓名"></el-table-column>
          <el-table-column prop="username" label="昵称"></el-table-column>
          <el-table-column prop="company_name" label="公司名称" width="200"></el-table-column>
          <el-table-column prop="phone" label="电话" width="100"></el-table-column>
          <el-table-column prop="is_adopt" label="审核" width="70">
            <template slot-scope="scope">
              <span v-if="scope.row.is_adopt === 0" style="color: #409eff;">未审核</span>
              <span v-if="scope.row.is_adopt === 1" style="color: #67c23a;">通过</span>
              <span v-if="scope.row.is_adopt === 2" style="color: #f56c6c;">未通过</span>
            </template>
          </el-table-column>
          <el-table-column prop="gender" label="性别" width="70">
            <template slot-scope="scope">
              {{ scope.row.gender | genderName }}
            </template>
          </el-table-column>
          <el-table-column label="状态" width="70">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="scope.row.status == 1 ? '正常' : '禁用'" placement="top" :enterable="false">
                <el-switch v-model="scope.row.status" :active-value="1" :inactive-value="2" @change="changeStatus(scope.row)"> </el-switch>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column prop="create_time" label="创建时间" width="150">
            <template slot-scope="scope">
              {{ scope.row.create_time | formatDate }}
            </template>
          </el-table-column>
          <el-table-column label="操作" width="120" fixed="right">
            <template slot-scope="scope">
              <el-button type="text" @click="check(scope.row.id)">审核</el-button>
              <el-button type="text" v-if="scope.row.is_adopt == 1" @click="agentMakeOrder(scope.row.id)">代理下单</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="page">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="searchForm.page"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="searchForm.limit"
            layout="total, sizes, prev, pager, next, jumper"
            :total="count"
          >
          </el-pagination>
        </div>
      </el-card>
      <el-dialog title="审核老板" :visible.sync="checkVisible" :before-close="handleClose('checkForm')" width="400px">
        <el-form ref="checkForm" :model="checkForm" label-width="80px" :rules="rules">
          <el-form-item label="审核" prop="is_adopt">
            <el-radio-group v-model="checkForm.is_adopt">
              <el-radio :label="1" border>通过</el-radio>
              <el-radio :label="2" border>未通过</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="close('checkVisible', 'checkForm')" size="small">取 消</el-button>
          <el-button type="primary" @click="send('checkVisible', 'checkForm')" size="small">确 定</el-button>
        </span>
      </el-dialog>
      <el-dialog title="代理下单" :visible.sync="agentVisible" :before-close="handleClose('agentForm')" width="700px">
        <el-form ref="agentForm" :model="agentForm" label-width="80px">
          <el-row v-for="(item, index) in agentForm.goods_data" :key="index" :gutter="10">
            <el-col :span="12">
              <el-form-item :prop="`goods_data.${index}.goods_name`" :rules="{ required: true, message: '商品名称不能为空', trigger: 'blur' }">
                <el-input v-model="agentForm.goods_data[index].goods_name" clearable placeholder="请输入商品名称"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-input-number
                v-model="agentForm.goods_data[index].goods_num"
                :precision="1"
                :step="1"
                :min="1"
                style="width: 100%;"
              ></el-input-number>
            </el-col>
            <el-col :span="2">
              <el-button type="success" icon="el-icon-circle-plus-outline" @click="addItem(index)"></el-button>
            </el-col>
            <el-col :span="2">
              <el-button type="danger" icon="el-icon-remove-outline" @click="reduceItem(index)"></el-button>
            </el-col>
          </el-row>
          <el-form-item prop="address_id" label="地址" :rules="{ required: true, message: '请选择地址', trigger: 'change' }">
            <el-select v-model="agentForm.address_id" placeholder="请选择地址">
              <el-option v-for="item in addressList" :key="item.value" :label="item.address" :value="item.id"> </el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="close('agentVisible', 'agentForm')" size="small">取 消</el-button>
          <el-button type="primary" @click="send('agentVisible', 'agentForm')" size="small">确 定</el-button>
        </span>
      </el-dialog>
    </el-scrollbar>
  </div>
</template>
<script>
import { getBossList, changeBossStatus, checkBoss, agentMakeOrder, getAddressSimple } from '@/network/api.js'

export default {
  name: 'boss',
  data() {
    return {
      searchForm: {
        page: 1,
        limit: 10,
        name: '',
        status: '',
        is_adopt: ''
      },
      table: [],
      count: 0,
      checkForm: {
        id: 0,
        is_adopt: 1
      },
      checkVisible: false,
      agentForm: {
        id: 0,
        goods_data: [],
        address_id: ''
      },
      addressList: [],
      agentVisible: false,
      rules: {
        is_adopt: [{ required: true, message: '名称必须', trigger: 'blur' }]
      }
    }
  },
  created() {
    this.search()
  },
  computed: {},
  methods: {
    // 每页条数变化
    handleSizeChange(val) {
      this.searchForm.limit = val
      this.search()
    },
    // 当前页变化
    handleCurrentChange(val) {
      this.searchForm.page = val
      this.search()
    },
    async search(pageInit = false) {
      try {
        if (pageInit === true) {
          this.searchForm.page = 1
        }
        const rtn = await getBossList(this.searchForm)
        this.table = rtn.list
        this.count = rtn.count
      } catch (e) {
        this.$message.error(e.message)
      }
    },
    // 审核
    check(id) {
      this.checkForm.id = id
      this.checkVisible = true
    },
    // 代理下单
    async agentMakeOrder(id) {
      try {
        const rtn = await getAddressSimple({ id })
        this.agentVisible = true
        this.$nextTick(() => {
          this.agentForm.id = id
          this.agentForm.goods_data = [{ goods_name: '', goods_num: 1 }]
          this.addressList = rtn
        })
      } catch (e) {
        this.$message.error(e.message)
      }
    },
    addItem() {
      this.agentForm.goods_data.push({ goods_name: '', goods_num: 1 })
    },
    reduceItem(index) {
      if (this.agentForm.goods_data.length > 1) {
        this.agentForm.goods_data.splice(index, 1)
      }
    },
    // 修改状态
    changeStatus(ev) {
      let msg = ''
      let oldStatus = ''
      switch (ev.status) {
        case 1:
          msg = '您确定要启用该老板吗?'
          oldStatus = 2
          break
        case 2:
          msg = '此操作将禁用该老板, 是否确定?'
          oldStatus = 1
          break
        default:
          return this.$message.error('不可用的操作')
      }
      this.$confirm(msg, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          try {
            await changeBossStatus({ id: ev.id, status: ev.status })
          } catch (e) {
            ev.status = oldStatus
            this.$message.error(e.message)
          }
        })
        .catch(() => {
          ev.status = oldStatus
          this.$message.warning('您已取消操作')
        })
    },
    // 关闭弹出前操作(不包括取消按钮)
    handleClose(formName) {
      return (done) => {
        this.$refs[formName].clearValidate()
        this.$refs[formName].resetFields()
        done()
      }
    },
    // 取消按钮
    close(visibleName, formName) {
      this.$refs[formName].clearValidate()
      this.$refs[formName].resetFields()
      this[visibleName] = false
    },
    send(visibleName, formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          switch (formName) {
            case 'checkForm': // 审核
              try {
                await checkBoss(this.checkForm)
                this.close(visibleName, formName)
                this.search()
              } catch (e) {
                this.$message.error(e.message)
              }
              break
            case 'agentForm': // 代理下单
              try {
                await agentMakeOrder({
                  id: this.agentForm.id,
                  goods_data: JSON.stringify(this.agentForm.goods_data),
                  address_id: this.agentForm.address_id
                })
                this.close(visibleName, formName)
                // this.search()
              } catch (e) {
                this.$message.error(e.message)
              }
              break
          }
        } else {
          this.$message.error('请检查表单')
          return false
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
</style>
